<template>
  <div class="home">
    <div class="box">
      <div class="header">
        <div class="warp_box">
          <div class="warp">
            <div class="warp_left">
              <span class="m_menu">
                <img src="../assets/img/menu.png" alt />
              </span>
            </div>
            <div class="warp_logo">
              <img src="../assets/img/logo.webp" alt />
            </div>
            <div class="warp_right">
              <div class="m_tools">
                <span>
                  <img src="../assets/img/search.png" alt />
                </span>
                <span>
                  <img src="../assets/img/shopcar.png" alt />
                </span>
                <span>
                  <img src="../assets/img/tongzhi.png" alt />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sd_module">
        <div class="banner">
          <div class="item">
            <img :src="require(`../assets/img/${msg[nowIndex].img}`)" />
          </div>
          <div class="page" v-if="this.msg.length > 1">
            <ul>
              <li @click="gotoPage(prevIndex)">&lt;</li>
              <li v-for="(item,index) in msg" :key="index" @click="gotoPage(index)">
                <span :class="{'current':nowIndex == index}"></span>
              </li>
              <li @click="gotoPage(nextIndex)">&gt;</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="xinxuan">
        <div class="xinxuan_title">心选精品</div>
        <div class="xinxuan_tab_box">
          <ul class="xinxuan_tab">
            <li
              v-for="(v,i) in summaryArr"
              :key="i"
              :class="{active:activeNum==i}"
              @click="activeClk(v,i)"
            >{{v.title}}</li>
            <!-- <li class="active">智慧家电</li>
            <li>健康抑菌</li>
            <li>人气爆款</li>
            <li>颜值控</li>
            <li>黑科技</li>
            <li>成套臻选</li>-->
          </ul>
        </div>
        <div class="xinxuan_bottom">
          <div class="xinxuan_box">
            <div class="content">
              <div class="xinxuan_left xinxuan_box_pro_box">
                <div class="xinxuan_box_pro_wrap" @click="goDetail(xinxuanArr[0])">
                  <div class="xinxuan_img">
                    <img :src="'http://localhost:2468/uploads/'+xinxuanArr[0].imgs" alt />
                  </div>
                  <div class="xinxuan_name">{{xinxuanArr[0].title}}</div>
                  <div class="xinxuan_note">{{xinxuanArr[0].vertion}}</div>
                </div>
              </div>
              <div class="xinxuan_center">
                <div
                  class="xinxuan_box_pro_top xinxuan_box_pro_box"
                  @click="goDetail(xinxuanArr[1])"
                >
                  <div class="xinxuan_img">
                    <img :src="'http://localhost:2468/uploads/'+xinxuanArr[1].imgs" alt />
                  </div>
                  <div class="xinxuan_name">{{xinxuanArr[1].title}}</div>
                  <div class="xinxuan_note">{{xinxuanArr[1].vertion}}</div>
                </div>
                <div
                  class="xinxuan_box_pro_top xinxuan_box_pro_box"
                  @click="goDetail(xinxuanArr[2])"
                >
                  <div class="xinxuan_img">
                    <img :src="'http://localhost:2468/uploads/'+xinxuanArr[2].imgs" alt />
                  </div>
                  <div class="xinxuan_name">{{xinxuanArr[2].title}}</div>
                  <div class="xinxuan_note">{{xinxuanArr[2].vertion}}</div>
                </div>
              </div>
              <div class="xinxuan_right">
                <div
                  class="xinxuan_box_pro_top xinxuan_box_pro_box"
                  @click="goDetail(xinxuanArr[3])"
                >
                  <div class="xinxuan_img">
                    <img :src="'http://localhost:2468/uploads/'+xinxuanArr[3].imgs" alt />
                  </div>
                  <div class="xinxuan_name">{{xinxuanArr[3].title}}</div>
                  <div class="xinxuan_note">{{xinxuanArr[3].vertion}}</div>
                </div>
                <div
                  class="xinxuan_box_pro_top xinxuan_box_pro_box"
                  @click="goDetail(xinxuanArr[4])"
                >
                  <div class="xinxuan_img">
                    <img :src="'http://localhost:2468/uploads/'+xinxuanArr[4].imgs" alt />
                  </div>
                  <div class="xinxuan_name">{{xinxuanArr[4].title}}</div>
                  <div class="xinxuan_note">{{xinxuanArr[4].vertion}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="background_fenl">
        <div class="banner">
          <div class="item">
            <img :src="require(`../assets/img/${msgs[nowIndex].img}`)" />
          </div>
        </div>
      </div>
      <div class="paihang">
        <div class="xinxuan_title">人气排行</div>
        <div class="xinxuan_tab_box">
          <ul class="xinxuan_tab">
            <li
              v-for="(v,i) in classifyArr"
              :key="i"
              :class="{active:classNum==i}"
              @click="classClk(v,i)"
            >{{v.type}}</li>
            <!-- <li class="active">冰箱</li>
            <li>洗衣机</li>
            <li>空调</li>
            <li>热水器</li>
            <li>电视</li>
            <li>油烟机</li>
            <li>燃气灶</li>-->
          </ul>
        </div>
        <div class="paihang_bottom">
          <div class="xinxuan_box">
            <div class="content">
              <div class="paihang_item">
                <div class="paihang_pro" v-for="(v,i) in paihangArr" :key="i">
                  <div class="paihang_img">
                    <img :src="'http://localhost:2468/uploads/'+v.imgs" alt />
                  </div>
                  <div class="paihang_right">
                    <div class="paihang_name">{{v.title}}</div>
                    <div class="paihang_xinghao">{{v.vertion}}</div>
                  </div>
                  <div class="paihang_icon icon_1" v-if="i==0"></div>
                  <div class="paihang_icon icon_2" v-else-if="i==1"></div>
                  <div class="paihang_icon icon_3" v-else-if="i==2"></div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="xinxuan_box">
            <div class="content">
              <div class="paihang_item">
                <div class="paihang_pro">
                  <div class="paihang_img">
                    <img :src="'http://localhost:2468/uploads/'+paihangArr[2].imgs" alt />
                  </div>
                  <div class="paihang_right">
                    <div class="paihang_name">{{paihangArr[2].title}}</div>
                    <div class="paihang_xinghao">{{paihangArr[2].vertion}}</div>
                  </div>
                  <div class="paihang_icon icon_2"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="xinxuan_box">
            <div class="content">
              <div class="paihang_item">
                <div class="paihang_pro">
                  <div class="paihang_img">
                    <img :src="'http://localhost:2468/uploads/'+paihangArr[3].imgs" alt />
                  </div>
                  <div class="paihang_right">
                    <div class="paihang_name">{{paihangArr[3].title}}</div>
                    <div class="paihang_xinghao">{{paihangArr[3].vertion}}</div>
                  </div>
                  <div class="paihang_icon icon_3"></div>
                </div>
              </div>
            </div>
          </div>-->
        </div>
      </div>
      <div class="sd_active">
        <div class="sd_content">
          <div class="sd_item">
            <div class="active_body active_left">
              <div class="active_msg">
                <div class="active_title">全屋购</div>
                <div class="active_main">旗舰品质，一站购齐！当你踏进家门的一刻，生活变得更智慧，一键开启空调、电视、扫地机器人，回家即是安心。</div>
              </div>
              <div class="active_img">
                <img src="../assets/img/sd1.webp" alt />
              </div>
            </div>
            <div class="active_body active_left">
              <div class="active_msg">
                <div class="active_title">全屋购</div>
                <div class="active_main">旗舰品质，一站购齐！当你踏进家门的一刻，生活变得更智慧，一键开启空调、电视、扫地机器人，回家即是安心。</div>
              </div>
              <div class="active_img">
                <img src="../assets/img/sd1.webp" alt />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="news">
        <div class="content">
          <div class="xinxuan_title">品牌咨询</div>
          <div class="active_img">
            <img src="../assets/img/sd2.webp" alt />
          </div>
          <div class="news_item">
            <div class="detail_title">海尔智家北京001号体验中心即将开业：这不是重点，那重点是？</div>
            <div class="detail_msg">倒计时3天！备受期待的海尔智家北京001号体验中心即将在9月11日正式与大家见面！</div>
            <div class="detail_line">
              <span class="js_line"></span>
            </div>
          </div>
          <div class="news_item">
            <div class="detail_title">上海001体验中心1周年：销售破1亿！有家电、更多是方案！</div>
            <div class="detail_msg">倒计时3天！备受期待的海尔智家北京001号体验中心即将在9月11日正式与大家见面！</div>
            <div class="detail_line">
              <span class="js_line"></span>
            </div>
          </div>
          <div class="news_item">
            <div class="detail_title">海尔智家北京001号体验中心即将开业：这不是重点，那重点是？</div>
            <div class="detail_msg">倒计时3天！备受期待的海尔智家北京001号体验中心即将在9月11日正式与大家见面！</div>
            <div class="detail_line">
              <span class="js_line"></span>
            </div>
          </div>
          <div class="news_item">
            <div class="detail_title">35年里，您可任意选择，但原创都是海尔</div>
            <div class="detail_msg">从1984年海尔诞生开始，在这35年里有无数科技出现在我们的生活里，如冰箱全空间保鲜技术、热水器零冷水技术、洗衣机...</div>
            <div class="detail_line">
              <span class="js_line"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="link">
        <div class="content">
          <div class="xinxuan_title">品牌链接</div>
          <div class="link_box">
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
          </div>
          <div class="link_box">
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
            <div class="link_img">
              <a
                href="http://www.casarte.com/?spm=cn.29341_pc.haiercn2019_homePage_links_20200116.1"
              >
                <img src="../assets/img/lianjie.webp" alt />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FooterTab />
  </div>
</template>


<script>
import { mapActions, mapState } from "vuex";
import { setMsg } from "../utils/product";
export default {
  data() {
    return {
      msg: [
        { title: 1, img: "bjt1.webp" },
        { title: 1, img: "bjt2.webp" },
        { title: 1, img: "bjt3.webp" },
        { title: 1, img: "bjt4.webp" },
      ],
      msgs: [
        { title: 1, img: "lbt1.png" },
        { title: 1, img: "lbt2.png" },
        { title: 1, img: "lbt3.png" },
        { title: 1, img: "lbt4.png" },
        { title: 1, img: "lbt5.png" },
        { title: 1, img: "lbt6.png" },
        { title: 1, img: "lbt7.png" },
      ],
      nowIndex: 0, //默认显示图片
      time: null, //定时器
      activeNum: 0,
      classNum: 0,
      bcid: 0,
    };
  },
  computed: {
    ...mapState("home", [
      "summaryArr",
      "xinxuanArr",
      "classifyArr",
      "paihangArr",
    ]),
    //上一张
    prevIndex() {
      if (this.nowIndex == 0) {
        return this.msg.length - 1;
      } else {
        return this.nowIndex - 1;
      }
    },
    //下一张
    nextIndex() {
      if (this.nowIndex == this.msg.length - 1) {
        return 0;
      } else {
        return this.nowIndex + 1;
      }
    },
  },
  methods: {
    ...mapActions("home", [
      "getSummary",
      "getXinxuan",
      "getClassify",
      "getPaihang",
    ]),
    gotoPage(index) {
      this.nowIndex = index;
    },
    runInv() {
      this.time = setInterval(() => {
        this.gotoPage(this.nextIndex);
      }, 2000);
    },
    activeClk(v, i) {
      this.activeNum = i;
      this.getXinxuan(v.id);
    },
    classClk(v, i) {
      this.classNum = i;
      this.getPaihang(v.id);
    },
    //商品详情
    goDetail(item) {
      this.$router.push({ path: "/detail" });
      setMsg(item);
    },
  },
  async mounted() {
    this.runInv(); //自动轮播
    this.getSummary();
    await this.getXinxuan(1);
    this.getClassify();
    this.getPaihang(1);
  },
};
</script>
<style src="../assets/css/home.css" scoped></style>
<style scoped></style>;